{% extends "index/main.html" -%}
{% block css -%}
<style type="text/css">
    @page {
        size: A4 portrait;
        margin: 0;
    }

    @media print {
        body {
            -webkit-print-color-adjust: exact;
        }

        html,
        body {
            width: 210mm;
            height: 297mm;
        }

        .table {
            border: 1px solid #000;
            border-collapse: collapse;
        }
    
        .table tr th,
        .table tr td {
            background-color: #fff;
        }
    }
</style>
{% endblock css -%}
{% block content -%}
<div class="page">
    <div class="box-content">
        <form id="tab_form" class="group-form">
            <div class="group-label">
                姓名
            </div>
            <div class="group-content">
                <input type="text" name="name">
            </div>
            <div class="group-label">
                人员状态
            </div>
            <div class="group-content">
                <select name="statu" class="sel">
                    <option value=""></option>
                    {% for val in status -%}
                    <option value="{{val}}">{{val}}</option>
                    {% endfor -%}
                </select>
            </div>
            <div class="group-content">
                <button type="button" onclick="query('tab', 1)" class="btn bg-royal">查询</button>
                <a href="javascript:history.back();" class="btn bg-royal">返回</a>
            </div>
        </form>
        <div id="page1">
            <table id="tab" highlight="false" data="{'orderBy':'id desc'}" url="{{ctx}}/users/userData.html"
                class="table table-border table-responsive table-hover">
                <thead>
                    <tr>
                        <th field="department">
                            部门
                        </th>
                        <th field="job">
                            职务
                        </th>
                        <th field="name">
                            姓名
                        </th>
                        <th field="gender">
                            性别
                        </th>
                        <th field="birthday">
                            出生年月
                        </th>
                        <th field="identity">
                            身份证号
                        </th>
                        <th field="telephone">
                            联系方式
                        </th>
                        <th field="education">
                            文化程度
                        </th>
                        <th field="username">
                            用户名
                        </th>
                        <th field="passwords">
                            密码
                        </th>
                        <th field="hiredate">
                            入职时间
                        </th>
                        <th field="leavedate">
                            离职时间
                        </th>
                        <th field="statu">
                            人员状态
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div id="tab_page"></div>
    <div align="center">
        <button type="button" onclick="print('#page1')" class="btn bg-royal">打印</button>
        <a href="javascript:history.back();" class="btn bg-royal">返回</a>
    </div>
</div>
<script type="text/javascript">
    ice(function () {
        query('tab', 1);
        iceui.use('print', function(){});
    });
</script>
{% endblock content -%}